<template>
    <div id="selection">
        <div class="cove"></div>
        <div class="selectCar">
            <div class="fir">
                <div class="img">
                    <img :src="imgUrl">
                </div>
                <div>
                    <p>{{name}}</p>
                    <span>￥{{price}}</span>
                </div>
                <van-icon name="cross" size="20" @click="isShowfor" />
            </div>
            <div class="sec">
                <p>颜色</p>
                <ul>
                    <li class="color" @click="changeBorder(index)" v-for="(data,index) in ColorList" :key="index" ref="Lis">{{data}}</li>
                </ul>
            </div>
            <div class="thir">
                <p>数量</p>
                <div class="numb">
                    <button @click="num>1?num--:num=1" :disabled="num===1">-</button><div>{{num}}</div><button @click="num++">+</button>
                </div>
            </div>
        </div>
        <div id="Btns">
            <button class="car" @click="addCar()">加入购物车</button>
            <button class="buy">立即购买</button>
        </div>
    </div>
</template>
<script>
import { mapState } from 'vuex'
export default {
  data () {
    return {
      name: '',
      price: 0,
      imgUrl: '',
      num: 1,
      //   isShow: true,
      ColorList: [],
      ImageList: []
    }
  },
  mounted () {
    for (var attr in this.shopCarList) {
      this.ColorList.push(this.shopCarList[attr].sku.skuName)
      this.ImageList.push(this.shopCarList[attr].sku.image)

      this.name = this.shopCarList[attr].sku.productName
      this.price = this.shopCarList[attr].sku.linePrice / 100
      // console.log(this.shopCarList[attr].sku)
    }
    this.imgUrl = this.ImageList[0]
    // console.log(this.ColorList)
  },
  computed: {
    ...mapState(['shopCarList'])
  },
  methods: {
    // ...mapActions(['getShopCarList']),
    isShowfor () {
      this.$emit('selecshow')
    },
    changeBorder (index) {
      var list = this.$refs.Lis
      list.forEach((element, index) => {
        element.style.borderColor = '#ddd'
        element.style.color = '#000'
      })
      list[index].style.borderColor = 'red'
      list[index].style.color = 'red'
      this.imgUrl = this.ImageList[index]
    }
  }
}
</script>
<style lang="scss" scoped>
    #selection{
        width: 100%;
        height:100%;
        .cove{
            background-color: rgba(80, 77, 77, 0.4);
            position:absolute;
            top:0px;
            left:0px;
            width: 100%;
            height:100%;
            z-index:10000;
        }
        .selectCar{
            background-color:#fff;
            width: 100%;
            height:326px;
            position: fixed;
            left:0px;
            bottom:48px;
            z-index:10001;
            overflow:scroll;
            .fir{
                margin:20px;
                display:flex;
                justify-content: space-between;
                .img{
                    width: 77px;
                    height: 77px;
                    border:1px solid #ddd;
                    img{
                        width: 100%;
                        height: 100%;
                    }
                }
                div p{
                    height:40px;
                    line-height:40px;
                    font-size:18px;
                    width: 200px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }
                div span{
                    font-size:18px;
                    color:red;
                }
            }
            .sec{
                margin:20px;
                p{
                    height:18px;
                    line-height:18px;
                    font-size: 15px;
                    margin-bottom:10px;
                }
                ul{
                    display:flex;
                    flex-wrap: wrap;
                    li{
                        width: 72px;
                        height: 39px;
                        line-height: 39px;
                        border:1px solid #ddd;
                        text-align: center;
                        font-size: 14px;
                        margin-right:10px;
                        margin-bottom:10px;
                    }
                }
            }
            .thir{
                margin:20px;
                p{
                    height:18px;
                    line-height:18px;
                    font-size: 15px;
                    margin-bottom:10px;
                }
                .numb{
                    border:1px solid #ddd;
                    margin-bottom:30px;
                    width: 128px;
                    padding-bottom:40px;
                    button{
                        width: 39px;
                        height: 39px;
                        line-height:39px;
                        border:none;
                        background-color: #fff;
                        text-align: center;
                        font-weight: 400;
                        font-size: 25px;
                        float: left;
                    }
                    div{
                        float: left;
                        width: 48px;
                        height: 39px;
                        line-height:39px;
                        text-align: center;
                        font-size:15px;
                        border-left:1px solid #ddd;
                        border-right:1px solid #ddd;
                    }
                }
            }
        }
        #Btns{
            height:48px;
            position: fixed;
            left:0px;
            bottom:0px;
            width: 100%;
            z-index:10001;
            button{
                text-align: center;
                height:48px;
                line-height: 48px;
                font-size: 15px;
                border:none;
                width: 50%;
            }
            .car{
                height:47px;
                line-height: 47px;
                background-color: #fff;
                color:#000;
                border-top:1px solid #eee;
            }
            .buy{
                background-color: rgb(245, 59, 59);
                color:#fff;
            }
        }
    }
</style>
